<template>
  <div class="table">
    <div class="handle-box">
      <div class="handle-filter clearfix">
        <div class="fl">
          <div class="filter-item">
            <el-button type="danger" disabled>删除</el-button>
          </div>
        </div>
        <div class="fr">
          <div class="filter-item filter-item-last">
            <el-date-picker
              type="datetimerange"
              align="right"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-time="['00:00:00', '23:59:59']"
            ></el-date-picker>
          </div>
        </div>
      </div>
    </div>

    <el-table
      :data="tableData"
      border
      class="table"
      ref="multipleTable"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center"></el-table-column>
      <el-table-column prop="id" label="序号" sortable width="80" align="center"></el-table-column>
      <el-table-column prop="title" label="文章标题"></el-table-column>
      <el-table-column prop="pic" label="封面" width="120">
        <template slot-scope="scope">
          <div class="table-pic">
            <img :src="scope.row.pic" alt>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="creatTime" label="发布时间" width="160"></el-table-column>
      <el-table-column label="操作" width="250">
        <template slot-scope="scope">
          <router-link to="/articleDetails" tag="el-button" class="el-button--mini">查看详情</router-link> 
          <el-button size="mini">发布</el-button>
          <el-button size="mini" @click="delForm(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          id: "1",
          title: "这些菜，会让你想起妈妈的味道！",
          pic: "",
          creatTime: "2019-05-01 11:42:10"
        }
      ]
    };
  },
  methods: {
    //删除
    soldOut() {
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        type: "warning"
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 查看详情
    see(){

    }
  }
};
</script>

<style scoped>
</style>

